<template>
  <div>
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      :page-size="pageSize"
      :total="rows"
      :current-page="pageNo"
      @current-change="currentChangeHandle"
    >
      <el-form class="p-4" inline :model="dataForm">
        <el-form-item>
          <el-date-picker
            v-model="selectDate"
            type="month"
            value-format="yyyyMM"
            format="YYYY-MM"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="w-8"
            @click="getDataList((pageNo = 1))"
          >
            <svg-icon icon-class="search" />
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="isAuth('10402002.MANAGE')"
            type="primary"
            class="w-8"
            @click="regenerateAndRePushStatisticData"
          >
            <svg-icon icon-class="Upload" />
          </el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" stripe>
        <el-table-column prop="month" :label="$t('common.month')" />
        <el-table-column
          prop="confirmTime"
          :label="$t('statistic.confirm_time')"
        >
          <template v-slot="scope">
            {{ dateTimeFilter(scope.row.confirmTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="creTime" :label="$t('common.create_time')">
          <template v-slot="scope">
            {{ dateTimeFilter(scope.row.creTime) }}
          </template>
        </el-table-column>

        <el-table-column width="75px">
          <template v-slot="scope">
            <div :title="$t('common.detail')">
            <el-button text class="w-8" @click="showDetailHandle(scope.row)">
              <svg-icon icon-class="View" />
            </el-button>
          </div>

            <!-- <el-dropdown class="align-middle" trigger="click">
              <el-button text class="w-8">
                <svg-icon icon-class="MoreFilled" />
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="showDetailHandle(scope.row)">
                    <svg-icon icon-class="View" />
                    {{ $t('common.detail') }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown> -->
            <!-- <el-tooltip
              class="item"
              effect="dark"
              :content="$t('common.detail')"
              placement="top"
            >
              <el-button
                type="text"
                style="color: #8c939d"
                icon="el-icon-view"
                @click="showDetailHandle(scope.row)"
              />
            </el-tooltip> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { formatDate } from '@/utils/formatDate'
import { timeFilter, dateFilter, dateTimeFilter } from '@/filters/index'
import { formatCountry } from '@/utils/formatCountry'
import {
  getIotMonthList,
  regenerateAndPushIotData
} from '@/api/statistic-operator'
import { isAuth } from '@/utils'

export default {
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      showDetail: false,
      selectDate: '',
      dataForm: {
        operatorName: ''
      },
      dataList: [],
      rows: 0,
      dataListLoading: false,
      platCode: 'FLYIOT',
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getFullYear() * 100 + time.getMonth() >
            new Date().getFullYear() * 100 + new Date().getMonth()
          )
        }
      }
    }
  },
  computed: {},
  mounted() {
    this.getSelectDate()
    this.getDataList()
  },
  methods: {
    timeFilter,
    dateFilter,
    dateTimeFilter,
    isAuth,
    getSelectDate() {
      const date = new Date()
      const currentYear = date.getFullYear() + ''
      const currentMonth = date.getMonth() + 1
      const month = date.getMonth() >= 10 ? currentMonth : '0' + currentMonth
      this.selectDate = currentYear + month
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val
      this.getDataList()
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        month: this.selectDate
      }
      getIotMonthList(params).then((res) => {
        this.dataList = res.data
        this.rows = res.rows
        this.dataListLoading = false
      })
    },
    showDetailHandle(row) {
      this.$store.commit('app/ADD_KEEP_ALIVE_LIST', 'StatisticOperator')
      this.$router.push({
        path: `/platform-report/flyiot-report-detail`,
        query: {
          month: row.month
        }
      })
    },
    regenerateAndRePushStatisticData() {
      this.$confirm(this.$t('statistic.regenarate_repush_confirm'), '', {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'info'
      }).then(() => {
        const params = {
          month: this.selectDate,
          focus: true
        }
        regenerateAndPushIotData(params)
          .then(() => {
            this.$message.success(this.$t('common.success'))
          })
          .catch((e) => {
            this.$message.error(e.message)
          })
      })
    },
    formatDate(cellValue, fmt) {
      cellValue = new Date(cellValue).valueOf()
      return formatDate(cellValue, fmt)
    },
    formatCountry(row, column, cellValue, index) {
      return formatCountry(cellValue)
    }
  }
}
</script>
